<template>
	<view>
		<!-- <page-head :title="title"></page-head> -->
		<view class="uni-padding-wrap">
			<block v-if="!recording && !playing && !hasRecord">
				<view class="page-body-time">
					<text class="time-big">{{ formatedRecordTime }}</text>
				</view>
				<view class="page-body-buttons">
					<view class="page-body-button"></view>
					<view class="page-body-button" @click="startRecord">开始录制</view>
					<view class="page-body-button"></view>
				</view>
			</block>
			<block v-if="recording === true">
				<view class="page-body-time">
					<text class="time-big">{{ formatedRecordTime }}</text>
				</view>
				<view class="page-body-buttons">
					<view class="page-body-button"></view>
					<view class="page-body-button" @click="stopRecord">
						<view class="button-stop-record"></view>
					</view>
					<view class="page-body-button"></view>
				</view>
			</block>
			<block v-if="hasRecord === true && playing === false">
				<view class="page-body-time">
					<text class="time-big">{{ formatedPlayTime }}</text>
					<text class="time-small">{{ formatedRecordTime }}</text>
				</view>
				<view class="page-body-buttons">
					<view class="page-body-button" @click="playVoice">播放</view>
					<view class="page-body-button" @click="clear">删除</view>
				</view>
			</block>
			<block v-if="hasRecord === true && playing === true">
				<view class="page-body-time">
					<text class="time-big">{{ formatedPlayTime }}</text>
					<text class="time-small">{{ formatedRecordTime }}</text>
				</view>
				<view class="page-body-buttons">
					<view class="page-body-button" @click="stopVoice">停止</view>
					<view class="page-body-button" @click="clear">删除</view>
				</view>
			</block>
		</view>
	</view>
</template>
<script>
// #ifdef APP-PLUS
import permision from '@/common/permission.js'
// #endif
var playTimeInterval = null
var recordTimeInterval = null
var recorderManager = null
var music = null
export default {
	data() {
		return {
			title: 'start/stopRecord、play/stopVoice',
			recording: false, //录音中
			playing: false, //播放中
			hasRecord: false, //是否有了一个
			tempFilePath: '',
			recordTime: 0,
			playTime: 0,
			formatedRecordTime: '00:00:00', //录音的总时间
			formatedPlayTime: '00:00:00' //播放录音的当前时间
		}
	},
	onUnload: function() {
		this.end()
	},
	onLoad: function() {
		music = uni.createInnerAudioContext()
		music.onEnded(() => {
			clearInterval(playTimeInterval)
			var playTime = 0
			console.log('play voice finished11')
			this.playing = false
			this.formatedPlayTime = playTime
			this.playTime = playTime
		})
		recorderManager = uni.getRecorderManager()
		recorderManager.onStart(() => {
			console.log('recorder start')

			this.recording = true
			recordTimeInterval = setInterval(() => {
				this.recordTime += 1
				this.formatedRecordTime = this.recordTime
			}, 1000)
		})
		recorderManager.onStop(res => {
			console.log('on stop', res.tempFilePath)
			music.src = res.tempFilePath

			this.hasRecord = true
			this.recording = false
		})
		recorderManager.onError(() => {
			console.log('recorder onError')
		})
	},
	methods: {
		async startRecord() {
			//开始录音
			// #ifdef APP-PLUS
			let status = await this.checkPermission()
			if (status !== 1) {
				return
			}
			// #endif

			// TODO ios 在没有请求过权限之前无法得知是否有相关权限，这种状态下需要直接调用录音，但没有状态或回调判断用户拒绝
			recorderManager.start({ format: 'mp3' })
		},
		stopRecord() {
			//停止录音
			recorderManager.stop()
			clearInterval(recordTimeInterval)
		},
		playVoice() {
			console.log('play voice')
			this.playing = true
			playTimeInterval = setInterval(() => {
				this.playTime += 1
				this.formatedPlayTime = this.playTime
			}, 1000)
			music.play()
		},
		stopVoice() {
			clearInterval(playTimeInterval)
			this.playing = false
			this.formatedPlayTime = 0
			this.playTime = 0
			music.stop()
		},
		end() {
			music.stop()
			recorderManager.stop()
			clearInterval(recordTimeInterval)
			clearInterval(playTimeInterval)
			;(this.recording = false), (this.playing = false), (this.hasRecord = false)
			;(this.playTime = 0), (this.recordTime = 0)
			;(this.formatedRecordTime = '00:00:00'), (this.formatedRecordTime = '00:00:00')
		},
		clear() {
			this.end()
		},
		// #ifdef APP-PLUS
		async checkPermission() {
			let status = permision.isIOS
				? await permision.requestIOS('record')
				: await permision.requestAndroid('android.permission.RECORD_AUDIO')

			if (status === null || status === 1) {
				status = 1
			} else if (status === 2) {
				uni.showModal({
					content: '系统麦克风已关闭',
					confirmText: '确定',
					showCancel: false,
					success: function(res) {}
				})
			} else {
				uni.showModal({
					content: '需要麦克风权限',
					confirmText: '设置',
					success: function(res) {
						if (res.confirm) {
							permision.gotoAppSetting()
						}
					}
				})
			}
			return status
		}
		// #endif
	}
}
</script>

<style>
image {
	width: 150rpx;
	height: 150rpx;
}

.page-body-wrapper {
	justify-content: space-between;
	flex-grow: 1;
	margin-bottom: 300rpx;
}

.page-body-time {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.time-big {
	font-size: 60rpx;
	margin: 20rpx;
}

.time-small {
	font-size: 30rpx;
}

.page-body-buttons {
	margin-top: 60rpx;
	display: flex;
	justify-content: space-around;
}

.page-body-button {
	width: 250rpx;
	text-align: center;
}

.button-stop-record {
	width: 110rpx;
	height: 110rpx;
	border: 20rpx solid #fff;
	background-color: #f55c23;
	border-radius: 130rpx;
	margin: 0 auto;
}
</style>
